import Vue from 'vue'

import 'froala-editor/js/froala_editor.pkgd.min'
// Import Froala Editor css files.
import 'froala-editor/css/froala_editor.pkgd.min.css'

import 'froala-editor/js/languages/zh_cn.js'
// Import Froala Editor
import 'froala-editor/js/plugins.pkgd.min.js'

// Import third party plugins
import 'froala-editor/js/third_party/embedly.min'
import 'froala-editor/js/third_party/font_awesome.min'
import 'froala-editor/js/third_party/spell_checker.min'
import 'froala-editor/js/third_party/image_tui.min'

// Import and use Vue Froala lib.
import url from '@/common/url-config'
import axios from 'axios'
import FroalaEditor from 'froala-editor'

const doUploadAction = function (filter, callback) {
    const me = this
    const body = document.getElementsByTagName('body')[0]
    const input = document.createElement('input')
    input.type = 'file'
    input.addEventListener('change', async function () {
        if (input.files.length == 0) {
            alert('没有选择文件!')
            return
        }

        const file = Array.from(input.files).filter(filter)[0]

        if (!file) {
            alert('数据格式不正确!')
            return
        }

        const uploadFile = new FormData()
        uploadFile.append('file', file)

        const tokenRes = await axios.get(url.fileToken)

        axios({
            method: 'post',
            url: url.uploadFile,
            headers: { 'Content-Type': 'multipart/form-data', token: tokenRes.data.data.token },
            data: uploadFile,
        })
            .then(res => {
                if (res.data.code == 200) {
                    callback.call(me, res.data)
                }
            })
            .catch(e => {
                console.log(e)
            })
            .finally(() => {
                input.parentNode.removeChild(input)
            })
    })
    body.append(input)
    input.dispatchEvent(new MouseEvent('click'))
}

FroalaEditor.DefineIcon('uploadImage', { NAME: 'image', SVG_KEY: 'insertImage' })
FroalaEditor.RegisterCommand('uploadImage', {
    title: '上传图片,支持PNG,GIF,JPG',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
        const me = this
        const allowContentTypes = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg']
        doUploadAction.call(
            this,
            file => {
                return allowContentTypes.some(n => file.type == n)
            },
            res => {
                if (allowContentTypes.some(n => n == res.data.contentType)) {
                    me.html.insert(
                        `<img src="${url.fileBaseUrl}${url.imgPreviewUrl}${res.data.id}" style="width: 300px;" class="fr-fic fr-dib">`,
                    )
                }
            },
        )
    },
})

FroalaEditor.DefineIcon('uploadFile', { NAME: 'image', SVG_KEY: 'insertFile' })
FroalaEditor.RegisterCommand('uploadFile', {
    title: '上传文件,支持PDF,Word,Excel,Power Point,RAR压缩包',
    focus: true,
    undo: true,
    refreshAfterCallback: true,
    callback: function () {
        const me = this
        const allowContentTypes = [
            'application/pdf',
            'application/msword',
            'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
            'application/vnd.ms-excel',
            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
            'application/vnd.ms-powerpoint',
            'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'application/x-rar-compressed',
        ]
        doUploadAction.call(
            this,
            file => {
                return allowContentTypes.some(n => file.type == n)
            },
            res => {
                if (allowContentTypes.some(n => n == res.data.contentType)) {
                    me.html.insert(
                        `<span><a href="${url.fileBaseUrl}${url.previewUrl}${res.data.id}" target="_blank">${res.data.name}</a>，<a href="${url.fileBaseUrl}${url.downloadUrl}${res.data.id}" target="_blank">点击下载</a></span>`,
                    )
                }
            },
        )
    },
})

import VueFroala from 'vue-froala-wysiwyg'
Vue.use(VueFroala)
